<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Work Time Animation</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: transparent;
            overflow: hidden;
            font-family: Arial, sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }
        
        .gif-container {
            display: flex;
            align-items: center;
            background: rgba(0, 0, 0, 0.7);
            border-radius: 10px;
            padding: 10px 15px;
            color: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }
        
        .gif-image {
            width: 50px;
            height: 50px;
            margin-right: 10px;
        }
        
        .text-container {
            display: flex;
            flex-direction: column;
        }
        
        .time-text {
            font-size: 14px;
            margin-bottom: 2px;
        }
        
        .main-text {
            font-size: 14px;
            font-weight: bold;
        }
        
        .countdown-text {
            font-size: 12px;
            color: #ffcc00;
        }
    </style>
</head>
<body>
    <div class="gif-container">
        <!-- Display real GIF image -->
        <img class="gif-image" id="gifImage" src="" alt="Work Animation">
        <div class="text-container">
            <div class="time-text" id="timeRangeText">09:00 - 17:00</div>
            <div class="main-text" id="statusText">Work in Progress</div>
            <div class="countdown-text" id="countdownText">Time remaining: --:--:--</div>
        </div>
    </div>

    <script>
        const { ipcRenderer } = require('electron');
        
        let endDateTime = null;
        let intervalId = null;
        
        // Format time as HH:MM:SS
        function formatTime(ms) {
            let seconds = Math.floor(ms / 1000);
            let minutes = Math.floor(seconds / 60);
            let hours = Math.floor(minutes / 60);
            
            seconds = seconds % 60;
            minutes = minutes % 60;
            
            return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
        }
        
        // Update countdown timer
        function updateCountdown() {
            if (!endDateTime) return;
            
            const now = Date.now();
            const remaining = endDateTime - now;
            
            if (remaining <= 0) {
                document.getElementById('countdownText').textContent = 'Work time ended!';
                clearInterval(intervalId);
                return;
            }
            
            document.getElementById('countdownText').textContent = `Time remaining: ${formatTime(remaining)}`;
        }
        
        ipcRenderer.on('work-time-data', (event, data) => {
            const timeRangeElement = document.getElementById('timeRangeText');
            const statusElement = document.getElementById('statusText');
            const gifImageElement = document.getElementById('gifImage');
            
            timeRangeElement.textContent = `${data.startTime} - ${data.endTime}`;
            statusElement.textContent = 'Work in Progress';
            
            // Randomly select one of the GIFs
            const gifNumber = Math.floor(Math.random() * 2) + 1;
            gifImageElement.src = `./gif/bubu_0${gifNumber}.gif`;
            
            // Set end time for countdown
            endDateTime = data.endDateTime;
            
            // Start countdown update
            if (intervalId) {
                clearInterval(intervalId);
            }
            intervalId = setInterval(updateCountdown, 1000);
            updateCountdown(); // Initial update
        });
    </script>
</body>
</html>